{% extends "baseUser.html" %}
{% block head %}
	{{ super() }}
{% endblock %}
{% block userData %}
    <div class="container">
		{% with messages = get_flashed_messages() %}
			  {% if messages %}
			    <div class="alert alert-info">
			    {% for message in messages %}
			      {{ message }}
			    {% endfor %}
			    </div>
			  {% endif %}
			{% endwith %}
		
      <div class="page-header">
        <h1>Dieta</h1>
        <p class="lead"></p>
      </div>

      <h3>Obtener Dieta</h3>
      <p>Especifique parametros para la dieta buscada</p>
		
	
		<div class="row">
			<div class="col-md-12">
			{% call macros.render_form(form, action_url=url_for('dietaObtener'), action_text='Perfeccionar') %}
				{{ macros.render_field(form.ingredientes, label_visible=true, placeholder='Ingredientes buscados', type='text') }}
			{% endcall %}
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<div class="panel-group" id="accordion">
				{% for result in results %}
				  <div class="panel panel-default">
				    <div class="panel-heading">
				      <h3 class="panel-title">
				        <a data-toggle="collapse" data-parent="#accordion" href=#collapse{{result['id']}}>
					        <span class="row">
							  <span class="col-md-9">{{result['titulo']}}</span>
							  <span class="col-md-3">Calorias: {{result['calories']}}</span>
							</span>
				        </a>
				      </h3>
				    </div>
				    <div id=collapse{{result['id']}}  class="panel-collapse collapse">
				      <div class="panel-body">
				      	<div class="row">
						  <div class="col-md-2">Porciones: {{result['servings']}}</div>
						  <div class="col-md-2">Calorias: {{result['calories']}}</div>
						  <div class="col-md-2">Fibra:{{result['dietaryFiber']}}</div>
						  <div class="col-md-2">Proteina:{{result['proteins']}}</div>
						  <div class="col-md-2">Grasa:{{result['totalFat']}}</div>
						  <div class="col-md-2">Cholesterol:{{result['cholesterol']}}</div>
						</div>
			      		<div class="row">
			      			<div class="col-md-12">
			      			{{result['directions']}}
			      			</div>
			      		</div>
				      </div>
				    </div>
				  </div>
				{% endfor %}
			</div>
		</div>

    </div> <!-- /container -->
    </div>
{% endblock %}

{% block js_footer %}
	{{ super() }}
{% endblock %}
